<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="../js/xt.js"></script>
		<link href="../css/zcss/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/components.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/pages.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/responsive.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">

		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/select2/css/select2.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/sweetalert/sweetalert.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/custombox/custombox.min.css" rel="stylesheet">
		<script src="js/plugins/sweetalert/sweetalert.min.js"></script>

		<style>
			.app {
				background: #ffffff;
				border: 1px solid rgba(54, 64, 74, 0.05);
				-webkit-border-radius: 5px;
				border-radius: 5px;
				"src/main/webapp/WEB-INF/jsp/afterSale/weixiuTableDetail.jsp" -moz-border-radius: 5px;
				background-clip: padding-box;
				margin-bottom: 20px;
				margin-top: 20px;
				margin-left: 40px;
				margin-right: 40px;
				padding: 10px;
			}
			
			.bg-lightbule {
				background: #ebeff2;
				font-family: "microsoft yahei", 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
				margin: 0;
				overflow-x: hidden;
				color: #797979
			}
			
			.el-col-12 {
				text-align: center;
				font-size: 14px;
			}
		</style>

	</head>

	<body class="bg-lightbule">

		<div id="app" class="app">

			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<div class="portlet-heading portlet-default">
					<h4 class="modal-title text-dark">维修工单</h4>
					<hr class="border-t-a">
				</div>

				<div class="gedit_scroll_content">
					<div id="bg-default" class="panel-collapse collapse in">
						<div class="portlet-body p-t-0 p-r-7 BODY_EDIT_SHOW_BOX">

							<h5><strong>单号与接件</strong></h5>
							<hr>
							<div class="row" style=" width:850px;margin: 0 auto;">
								<el-form-item>
									<el-col :span="12">
										工单流水号:{{form.id}}
									</el-col>
									<el-col :span="12">
										维修分类：{{form.type}}
										<!--<span v-if="form.type ===451">保养</span>
										<span v-else-if="form.type ===452">安装</span>
										<span v-else-if="form.type ===453">升级</span>
										<span v-else-if="form.type ===454">维修</span>
										<span v-else>其他</span>-->
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										接单日期：
										<!--{{dateFormate(form.date1,1)}}-->
										<el-date-picker v-model="form.date1" type="date" placeholder="选择日期" disabled></el-date-picker>
									</el-col>
									<el-col :span="12">
										维修日期：
										<!--{{dateFormate(form.date2,1)}}-->
										<el-date-picker v-model="form.date2" type="date" placeholder="选择日期" disabled></el-date-picker>
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										对应客户:
										<span style="font-weight:normal;color:#9e9e9e">〖</span>{{form.custname}}
										<a :href="'/cusview?id=' + form.cusid "><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span>
									</el-col>
									<el-col :span="12">
										客户联系人:
										<span style="font-weight:normal;color:#9e9e9e">〖</span>{{form.liname}}
										<a href=""><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span>
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										联系方式:{{form.phone}}
									</el-col>
									<el-col :span="12">
										客户地址:{{form.address}}
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										接单人员:{{form.user}}
									</el-col>
									<el-col :span="12">
										维修人员:{{form.repuser}}
									</el-col>
								</el-form-item>

							</div>

							<hr>
							<h5><strong>接件详情</strong></h5>
							<hr>
							<div class="row" style=" width:850px;margin: 0 auto;">
								<el-form-item>
									<el-col :span="12">
										维修产品:{{form.gooid}}
									</el-col>
									<el-col :span="12">
										对应订单:{{form.orderName}}({{form.orderid}})
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										保修状态:{{form.cat}}
										<!--<span v-if="form.cat ===401">保养</span>
										<span v-else-if="form.cat ===402">出保</span>
										<span v-else>未知</span>-->
									</el-col>
									<el-col :span="12">
										保修时间:{{form.gooTime}}

									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										承接部门:{{form.dept}}
										<!--<span v-if="form.dept ===8">维修一部</span>
										<span v-else-if="form.dept ===9">维修二部</span>
										<span v-else>维修部</span>-->
									</el-col>
									<el-col :span="12">
										维修人员:{{form.repuser}}
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										故障描述:{{form.desc}}
									</el-col>
									<el-col :span="12">
										维修工单进度:{{form.state}}
										<!--<span v-if="form.state ===464">待维修</span>
										<span v-else-if="form.state ===461">维修中</span>
										<span v-else-if="form.state ===462">维修完成</span>
										<span v-else-if="form.state ===463">维修意外终止</span>
										<span v-else>其他</span>-->
									</el-col>
								</el-form-item>

								<!--<el-form-item>
									<el-col :span="8">&nbsp;</el-col>
									<el-col :span="8">
										<el-button v-if="form.stateid === 464" type="info" @click="getOrderHref()">信息已确认完成，开始维修</el-button>
										<el-button v-else type="info" class="f-s-12 text-black" disabled>信息已确认完成，开始维修</el-button>
									</el-col>
									<el-col :span="8">&nbsp;</el-col>
								</el-form-item>-->

							</div>

							<hr>
							<h5><strong>客户评价</strong></h5>
							<hr>
							<div class="row" style=" width:850px;margin: 0 auto;">
								<el-form-item label="满意度：">
									<el-rate v-if="form.stateid === 465" allow-half v-model="form.rate" show-text></el-rate>
									<el-rate v-else allow-half v-model="form.rate" show-text disabled></el-rate>
								</el-form-item>
								<el-form-item label="评价:">
									<el-input v-if="form.stateid === 465" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.remark"></el-input>
									<el-input v-else type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.remark" disabled></el-input>
								</el-form-item>

							</div>
							<hr>
							<h5><strong>费用&维修配件</strong></h5>
							<hr>
							<div class="row" style=" width:850px;margin: 0 auto;">

								<el-form-item>
									<el-col :span="12">
										维修费用:￥：{{form.money}}元&nbsp;

										<a title="提示：维修费用是指维修人员收费的维修费用" style="font-weight: bold; CURSOR: help"><img src="/images/icons/infild.png" align="AbsMiddle">
											<font color="#FF99FF">提示</font>
										</a>

									</el-col>
									<el-col :span="12">
										<el-form-item prop="date3">
											维修完成时间：
											<el-date-picker v-model="form.date3" type="date" placeholder="选择日期" disabled></el-date-picker>
										</el-form-item>
									</el-col>
								</el-form-item>

								<el-form-item>
									<el-col :span="12">
										总维修费用:￥：{{form.sum}}元&nbsp;
										<a title="提示：总维修费用是指维修人员收费的维修费用+维修配件的费用。" style="font-weight: bold; CURSOR: help"><img src="/images/icons/infild.png" align="AbsMiddle">
											<font color="#FF99FF">提示</font>
										</a>
									</el-col>
								</el-form-item>

								<el-form-item>

									<div class="row">
										<div style="margin-left: 4%; text-align: right;">
											<span style="line-height: normal"> 
									<el-button 
											type="text" class="f-s-12 text-black" 
											disabled>编辑明细</el-button>
										&nbsp;&nbsp;
										<a class="f-s-12 text-black">
											<i class="ion-printer m-r-5"></i>打印订单
										</a>&nbsp;&nbsp;
										<a class="f-s-12 text-black" >
											<i class="fa fa-file-word-o m-r-5"></i>导出word打印
										</a>&nbsp;&nbsp;
										<a class="f-s-12 text-black"> 
											<i class="fa fa-file-excel-o m-r-5"></i>导出excel打印
										</a>
										</span>
											<div class="bootstrap-table" style="overflow: auto;">

												<div class="fixed-table-container">

													<table class="table table-bordered table-hover" id="tb_orderDetail">
														<thead>
															<tr>
																<th style="text-align: center" class="th-inner"><span style="font-family: 楷体">序号</span></th>
																<th style="text-align: center" class="th-inner"><span style="font-family: 楷体">商品</span></th>
																<th style="text-align: center" class="th-inner"><span style="font-family: 楷体">单价</span></th>
																<th style="text-align: center" class="th-inner"><span style="font-family: 楷体">数量</span></th>

																<th style="text-align: center" class="th-inner"><span style="font-family: 楷体">金额</span></th>
															</tr>
														</thead>
														<tbody>
															<c:forEach items="${PeiJianCart1}" var="good" varStatus="i" begin="1">
																<tr>
																	<td class="text-center">${i.index}</td>
																	<td class="text-left">${good.name}
																		<a href="/productdesc?id=${good.id}"><i class="fa fa-folder-open" data-toggle="tooltip" data-placement="bottom" data-original-title="打开详细页面"></i></a>
																	</td>
																	<td style="white-space: nowrap;" class="text-center"><span style="white-space: nowrap"><span
																	style="font-size: 9pt; font-weight: normal;">￥${good.price}</span></span>

																		<td class="text-center">${good.number}</td>

																	</td>
																	<td style="white-space: nowrap;" class="text-center"><span style="white-space: nowrap"><span
																	style="font-size: 9pt; font-weight: normal;">￥${good.goodTotal}</span></span>
																	</td>

																</tr>
															</c:forEach>
															<!--订单明细-->
															<tr>
																<td class="text-left">
																	<font face="楷体"><b>合计</b></font>
																</td>
																<td></td>
																<td style="white-space: nowrap;" class="text-right"></td>

																<td style="white-space: nowrap;" class="text-right"><span style="white-space: nowrap">${PeiJianCart1[0].number}</span>
																</td>
																<td>
																	<span style="font-size: 9pt; font-weight: normal;">￥${PeiJianCart1[0].sum}</span></span>
																</td>
															</tr>

															<tr>
																<td colspan="2" align="left">
																	<font face="楷体">总计（大写金额）</font>
																</td>
																<td colspan="3" align="right">
																	<font face="楷体">整</font>
																</td>
															</tr>

														</tbody>
													</table>

												</div>
											</div>

										</div>

									</div>

								</el-form-item>
								<el-form-item>
									<el-col :span="8">&nbsp;</el-col>
									<el-col :span="8">
										<el-button v-if="form.stateid === 465" type="info" @click="submitForm('form')">客户已确认,维修完成</el-button>
										<el-button v-else-if="form.stateid === 461" type="info" disabled>客户已确认,维修完成</el-button>
										<i v-else></i>
									</el-col>
									<el-col :span="8">&nbsp;</el-col>
								</el-form-item>
							</div>

						</div>
					</div>
				</div>
			</el-form>
			<el-button plain> </el-button>
		</div>

		<script>
			var vms = new Vue({
				el: "#app",
				data() {
					return {
						loading2: true,
						centerDialogVisible: false,

						form: {
							id: '',
							type: '', //分类
							typeid: '',
							date1: '', //接单日期
							date2: '', //维修时间
							date3: '', //结束日期
							custname: '',
							cusid: '',
							liname: '',
							linid: '',
							phone: '',
							address: '',
							user: '',
							repuser: '',
							gooid: '',
							orderName: '', //订单名字
							orderid: '', //订单编号
							cat: '',
							catid: '',
							gooTime: '',
							dept: '',
							desc: '',
							state: '',
							stateid: '',
							sum: '', //总金额
							rate: 0, //满意等级
							remark: '' //评价
						},
						//验证规则
						rules: { //数据源model
							date3: [{
								type: 'date',
								required: true,
								message: '请选择完成时间',
								trigger: 'blur'
							}],
							rate: [{
								required: true,
								message: '请填写满意度。',
								trigger: 'blur'
							}],
							remark: [{
								required: true,
								message: '请填写评级。',
								trigger: 'blur'
							}]

						}
					}
				},
				methods: {
					submitForm(formName) {
						var iossn = this;
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/changeStateByFinish1",
									//参数转换
									Qs.stringify({
										"id": iossn.form.id,
										"rate":iossn.form.rate,
										"remark":iossn.form.remark,
										"cusid":iossn.form.cusid
									}, {
										arrayFormat: 'brackets'
									})

								).then(function(v) {
									//window.location.href = "/getWeixiuty";
									iossn.$message({
										message: '维修工单已确定，3秒后转到维修总控台。',
										type: 'success'
									});

									setTimeout(() => {
										history.go(-1);
									}, 3000);
								}).catch(function(e) {
									alert("出错了" + e);
								});
							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					dateFormate: function(time, i) { //时间格式化
						var date = new Date(time);
						var year = date.getFullYear();
						/* 在日期格式中，月份是从0开始的，因此要加0
						 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
						 * */
						var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
						var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
						var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
						var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
						var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						// 拼接
						if(i == 1) {
							return year + "-" + month + "-" + day;
						} else {
							return hours + ":" + minutes + ":" + seconds;
						}
					},
					getOrderHref() { //修改维修工单的状态为执行中
						var iosnn = this;
						const loading = this.$loading({
							lock: true,
							text: 'Loading',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});

						//post提交数据
						axios.post("/afterSale/changeState",
							//参数转换
							Qs.stringify({
								"id": iosnn.form.id,
								"cusid":this.form.cusid
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {
							setTimeout(() => {
								loading.close();
								if(v.data == true) {
									swal("维修完成！", "", "success");
								} else {
									wal("未完成维修！", "", "warning");
								}
								iosnn.form.state = "执行中";
								iosnn.form.stateid = 461;
							}, 5000);

						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},

				},
				mounted() {
					var news = ${
						weixiuTabledetail
					};
					var sum = ${
						PeiJianCart1[0].sum
					};
					//var sum = ${PeiJianCart1};
					console.log(sum);

					console.log(news);
					if(news) {
						this.form.id = news.rep_id;
						this.form.type = news.type;
						this.form.typeid = news.rep_type;
						this.form.date1 = news.rep_date;
						this.form.date2 = news.rep_uniontime;
						this.form.custname = news.cus_name;
						this.form.cusid = news.cus_id;
						this.form.liname = news.lin_name;
						this.form.linid = news.lin_id;
						this.form.user = news.user;
						this.form.repuser = news.repuser
						this.form.gooid = news.goo_name;
						this.form.orderName = news.otitle;
						this.form.orderid = news.rep_orderid;
						this.form.cat = news.cat;
						this.form.catid = news.rep_cat;
						this.form.gooTime = "12个月";
						this.form.state = news.state;
						this.form.stateid = news.rep_state;
						this.form.dept = news.dep_name;
						this.form.desc = news.rep_describe;
						this.form.phone = news.rep_phone;
						this.form.money = news.rep_cost;
						this.form.sum = this.form.money + sum;
						this.form.date3 = news.rep_finishtime;
						this.form.address = news.rep_address;
						this.form.rate = news.rep_rate;
						this.form.remark = news.rep_remark;
					}
				}
			});
		</script>
		<!--UTF8-->
	</body>
</html>